import 'package:flutter/material.dart';

void main() {
  // runApp内置函数
  //1. 运行应用程序
  runApp(const MyApp());
}

// 有且只有一个 根组件
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // 这个  widget 是应用程序的根
  @override
  Widget build(BuildContext context) {
    // 指定UI  程序风格
    return MaterialApp(
      title: ' hello itheima', // 网页标题
      theme: ThemeData(
        // 这是应用程序的主题。

        // 尝试运行你的应用程序，使用 "flutter run"。你会看到应用
        //程序有一个紫色的工具栏。然后，在不退出应用程序的情况下，尝试
        //将下面 colorScheme 中的 seedColor 改为 Colors.green，然后调用
        //“热重载”（保存你的更改或在支持 Flutter 的 IDE 中点击“热重载”按钮，或者如果你是从命令行启动应用程序的，按 "r"）。
        //
        // 注意计数器没有重置回零；应用程序的状态在重载过程中不会丢失。要重置状态，请使用热重启。

        // 这对代码也适用，不仅仅是值：大多数代码更改可以通过热重载来测试。
        colorScheme: ColorScheme.fromSeed(
            seedColor: const Color.fromARGB(255, 104, 253, 54)),
        useMaterial3: true,
      ),
      // 当前展示的主页面
      home: const MyHomePage(title: 'Hi ithima Home 首页'), // 页面
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

// 这个Widget 是应用程序的首页。它是有状态的，意味着它有一个 State 对象（定义在下面），其中包含影响其外观的字段。

  // 这个类是状态的配置。它持有父级（在这种情况下是 App Widget ）提供的值（在这种情况下是标题），并被 build 方法使用。子类中的字段总是标记为 "final"。

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // 这个调用 setState 告诉 Flutter 框架这个 State 发生了变化，这会导致下面的 build 方法重新运行，从而使显示能够反映更新的值。如果我们改变了 _counter 而不调用 setState，那么 build 方法就不会再次运行，因此什么都不会发生。
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // 每次调用 setState 时都会重新运行这个方法，例如上面的 _incrementCounter 方法。

    // 每次调用 setState 时都会重新运行这个方法，例如上面的 _incrementCounter 方法。
    return Scaffold(
      appBar: AppBar(
        // 尝试将这里的颜色改为特定的颜色（例如 Colors.amber），然后触发热重载，看看 AppBar 颜色的变化，而其他颜色保持不变。

        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // 这里我们从 MyHomePage 对象中获取值，该对象是由 App.build 方法创建的，并用它来设置应用栏的标题。
        title: Text(widget.title),
      ),
      body: Center(
// Center 是一个布局Widget 。它接受一个子Widget 并将其定位在父级的中间。
        child: Column(
          // Column 也是一个布局Widget 。它接受一个子Widget 列表并垂直排列它们。默认情况下，它在水平方向上调整大小以适应其子Widget ，并尝试与其父级一样高。
          // Column 有各种属性来控制其大小和子Widget 的位置。这里我们使用 mainAxisAlignment 来垂直居中子Widget ；主轴在这里是垂直轴，因为 Columns 是垂直的（交叉轴将是水平的）。
          //

          // 尝试调用“调试绘制”（在 IDE 中选择“切换调试绘制”操作，或在控制台中按 "p"），以查看每个Widget 的线框。
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // const  提高性能
            const Text(
              '你已经按了这么多次按钮：',
            ),
          // 这个不能假const   因为是变量
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
    // 底部按钮
      floatingActionButton: FloatingActionButton(
        // 按压
        onPressed: _incrementCounter,
        // 
        tooltip: '增加',
        // const  提高性能  icon  图标
        child: const Icon(Icons.add),
      ), // 这个尾随逗号使 build 方法的自动格式化更美观。
    );
  }
}
